<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    this is master
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仪表图</title>
    <script src="js/echarts.js"></script>
</head>

<body>
    <div id="main" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                title: {
                    textStyle: {
                        show: true,
                        color: '#000',
                        fontSize: 20
                    }
                },
                detail: { formatter: '{value}%' }, //仪表盘显示数据
                // axisLine: { //仪表盘轴线样式
                //     lineStyle: {
                //         width: 10
                //     }
                // },
                axisLine: {            // 坐标轴线  
                    lineStyle: {       // 属性lineStyle控制线条样式  
                        width: 10,      // 坐标轴线宽度
                        color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
                    }
                },
                splitLine: { //分割线样式
                    length: 20
                },
                // 坐标轴小标记
                axisTick: {
                    // 属性show控制显示与否，默认不显示
                    show: true,
                    // 每份split细分多少段
                    splitNumber: 5,
                    // 属性length控制线长
                    length: 8,
                    // 属性lineStyle控制线条样式
                    lineStyle: {
                        color: '#eee',
                        width: 1,
                        type: 'solid'
                    }
                },
                data: [{ value: 1, name: 'CPU' }],
                markPoint: { //指针中间的圆圈
                    symbol: 'circle',
                    symbolSize: 10,
                    data: [
                        { x: 'center', y: 'center', itemStyle: { color: '#fff' } }
                    ]
                },
                pointer: {//指针
                    show: true,
                    length: '70%',
                    width: 7
                },
            }

        ]
    };
    // option = {
    //     tooltip: {
    //         formatter: "{a} <br/>{b} : {c}%"
    //     },
    //     toolbox: {
    //         feature: {
    //             restore: {},
    //             saveAsImage: {}
    //         }
    //     },
    //     series: [
    //         {
    //             name: '业务指标',
    //             type: 'gauge',
    //             radius: '60%',
    //             endAngle: 90,
    //             startAngle: 225,
    //             detail: { formatter: '{value}%' },
    //             axisLine: {//仪表圈
    //                 show: true,
    //                 lineStyle: {
    //                     color: [[1, '#fff']],//F0F0F0
    //                     width: 10
    //                 }
    //             },
    //             splitLine: {//分割线
    //                 show: false,
    //                 length: 20
    //             },
    //             axisTick: {//刻度线
    //                 show: true,
    //                 splitNumber: 5,
    //                 length: 20,
    //                 lineStyle: {
    //                     color: '#F00',
    //                     width: 3
    //                 }

    //             },
    //             axisLabel: {//刻度标签
    //                 show: false
    //             },
    //             pointer: {//指针
    //                 show: false
    //             },
    //             title: {
    //                 show: true,
    //                 offsetCenter: [0, '-20%'],
    //                 textStyle: {
    //                     color: '#000',
    //                     fontSize: 20
    //                 }
    //             },
    //             detail: {
    //                 formatter: '{value}分',
    //                 offsetCenter: [0, '0%'],
    //                 textStyle: {
    //                     color: '#f00',
    //                     fontSize: 32
    //                 }
    //             },
    //             data: [{ value: 50, name: '安全综合评分' }]
    //         },
    //         {
    //             name: '业务指标',
    //             type: 'gauge',
    //             radius: '60%',
    //             endAngle: -45,
    //             startAngle: 91,
    //             detail: { formatter: '{value}%' },
    //             axisLine: {//仪表圈
    //                 show: true,
    //                 lineStyle: {
    //                     color: [[1, '#fff']],//F0F0F0
    //                     width: 10
    //                 }
    //             },
    //             splitLine: {//分割线
    //                 show: false,
    //                 length: 10
    //             },
    //             axisTick: {//刻度线
    //                 show: true,
    //                 splitNumber: 5,
    //                 length: 10,
    //                 lineStyle: {
    //                     width: 2
    //                 }

    //             },
    //             axisLabel: {//刻度标签
    //                 show: false
    //             },
    //             pointer: {//指针
    //                 show: false
    //             },
    //             title: {
    //                 show: false
    //             },
    //             detail: {
    //                 show: false
    //             },
    //             data: []
    //         },
    //         {//空仪表,中间白色空白
    //             name: '',
    //             type: 'gauge',
    //             radius: '63%',
    //             detail: { formatter: '{value}%' },
    //             axisLine: {//仪表圈
    //                 show: true,
    //                 lineStyle: {
    //                     color: [[1, '#fff']],
    //                     width: 10
    //                 }
    //             },
    //             splitLine: {//分割线
    //                 show: false
    //             },
    //             axisTick: {//刻度线
    //                 show: false
    //             },
    //             axisLabel: {//刻度标签
    //                 show: false
    //             },
    //             pointer: {//指针
    //                 show: false
    //             },
    //             detail: {
    //                 show: false
    //             },
    //             data: []
    //         },
    //         {//空仪表,最外层边框
    //             name: '',
    //             type: 'gauge',
    //             radius: '64%',
    //             detail: { formatter: '{value}%' },
    //             axisLine: {//仪表圈
    //                 show: true,
    //                 lineStyle: {
    //                     color: [[1, '#E9E9E9']],
    //                     width: 4
    //                 }
    //             },
    //             splitLine: {//分割线
    //                 show: false
    //             },
    //             axisTick: {//刻度线
    //                 show: false

    //             },
    //             axisLabel: {//刻度标签
    //                 show: false
    //             },
    //             pointer: {//指针
    //                 show: false
    //             },
    //             detail: {
    //                 show: false
    //             },
    //             data: []
    //         }
    //     ]
    // };
    myChart.setOption(option);
</script>

</html>